.@{tabsPrefixClass} {
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }

  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  &-content-wrap {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;

    &-animated {
      transition: transform @effect-duration @easing-in-out,
        left @effect-duration @easing-in-out,
        top @effect-duration @easing-in-out;
      will-change: transform, left, top;
    }
  }

  &-pane-wrap {
    width: 100%;
    flex-shrink: 0;
    overflow-y: auto;
  }

  &-tab-bar-wrap {
    flex-shrink: 0;
  }

  &-horizontal {
    .@{tabsPrefixClass} {
      &-pane-wrap-active {
        height: auto;
      }

      &-pane-wrap-inactive {
        height: 0;
        overflow: visible;
      }
    }
  }

  &-vertical {
    .@{tabsPrefixClass} {
      &-content-wrap {
        flex-direction: column;
      }

      &-tab-bar-wrap {
        height: 100%;
      }

      &-pane-wrap {
        height: 100%;
      }

      &-pane-wrap-active {
        overflow: auto;
      }

      &-pane-wrap-inactive {
        overflow: hidden;
      }
    }
  }

  &-top,
  &-bottom {
    flex-direction: column;
  }

  &-left,
  &-right {
    flex-direction: row;
  }
}
